<template>
  <view class="login">
  <statusBar></statusBar>
    <logo></logo>
    <view class="loginc">
      <view class="loinf">
        <view class="login-user">
          <view class="login-img"><image src="../../static/img/login/user.png" mode=""></image></view>
          <input type="text" v-model="userName" />
        </view>
        <view class="login-pwd">
          <view class="login-img"><image src="../../static/img/login/pwd.png" mode=""></image></view>
          <input type="password" value="" v-model="userPwd" />
        </view>
      </view>
      <button @click="login">登录</button>
      <view class="loginmore">
        <view class="canclelogin" @click="cancleLogin">取消登录</view>
        <view class="registergo" @click="register">立即注册&gt;&gt;</view>
      </view>
    </view>
    <uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>
  </view>
</template>

<script>
import statusBar from "@/components/status-bar.vue"
import logo from '@/components/logo.vue';
export default {
  components: {
    logo,
    statusBar
  },
  data() {
    return {
      userName: '',
      userPwd: '',
      type: '',
    };
  },
  created() {
    this.userName = uni.getStorageSync('storage_username');
    this.userPwd = uni.getStorageSync('storage_userpwd');
  },
  methods: {
    login: function() {
      if (!this.userName || !this.userPwd) {
        this.msg = '请输入账号或者密码';
        this.togglePopup('middle');
        return false;
      }
      uni.request({
        method: 'POST',
        url: this.apiUrl + 'api/Login/authenticate', //仅为示例，并非真实接口地址。
        data: {
          Username: this.userName,
          Password: this.userPwd
        },
        success: res => {
          this.msg = '登陆成功';
          this.togglePopup('middle');

          if (res.statusCode == 200) {
            if (res.data.userRoleCode == 'student') {
              uni.switchTab({
                url: '../tarbar/index/index'
              });
              uni.setStorage({
                key: 'token',
                data: 'Bearer ' + res.data.token,
                success: function() {
                }
              });
              uni.setStorage({
                key: 'storage_username',
                data: this.userName,
                success: function() {
                }
              });
              uni.setStorage({
                key: 'storage_userpwd',
                data: this.userPwd,
                success: function() {
                }
              });
            } else {
              this.msg = res.data.message;
              this.togglePopup('middle');
            }
          } else {
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    register: function() {
      uni.reLaunch({
        url: 'register/register'
      });
    },
    cancleLogin: function() {
      uni.reLaunch({
        url: '../tarbar/user/user'
      });
    }
  }
};
</script>

<style scoped>
.login {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.login .logo {
  background-color: inherit;
}
.loginc {
  width: 700upx;
  margin: 200upx auto 0 auto;
}
.loinf {
  width: 665upx;
  padding: 0 17.5upx;
  height: 160px;
  margin: 0 auto 0 auto;
  background-color: #ffffff;
}
.loinf .login-img {
  width: 100upx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loinf input {
  width: 565upx;
  height: 100%;
  line-height: 80px;
}
.loinf uni-input input {
  line-height: 80px !important;
}
.loinf .login-user {
  height: 79px;
  border-bottom: 1px solid #989898;
  display: flex;
}
.loinf .login-pwd {
  height: 80px;
  display: flex;
}
.loinf image {
  width: 25px;
  height: 25px;
}
.loginc button {
  margin-top: 30px;
  margin-bottom: 10px;
  background-color: #23ccbe;
  color: #ffffff;
}
.registergo {
  color: #ffffff;
  font-size: 16px;
}
.canclelogin {
  color: #ffffff;
  font-size: 16px;
}

.loginmore {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.login .logo .logo-text {
  color: #325454 !important;
}
</style>
